<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0px;padding: 0px}
    /* div{width: 100px;height: 100px;background: aqua;position: absolute;} */
    li{
        width: 400px;height: 400px;background: aqua;float: left;
        list-style: none;
    }
    .wrap ul{width: 2000px;position: absolute;left:0;}
    .wrap{width: 400px;height: 400px;position: relative;
          border: 1px solid black;margin: 0 auto;}
    img{width: 400px;height: 400px;}
      .swiperMenu {
            position: absolute;
            right: 20px;
            bottom: 10px;
            padding: 5px 10px;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 13px;
            width: 200px;
        }
        .swiperMenu li {
            float: left;
            width: 18px;
            height: 18px;
            margin: 0 5px;
            border-radius: 50%;
            background: paleturquoise
        }

        .swiperMenu .active {
            background: red;
        }
    </style>
    <!-- <script src="t/animate.js"></script> -->
</head>
<body>
    <!-- <div></div> -->
    <div class="wrap">
    <ul>
        <li><img src="t/images/girlbig1.jpg" alt=""></li>
        <li><img src="t/images/girlbig2.jpg" alt=""></li>
        <li><img src="t/images/girlbig1.jpg" alt=""></li>
        <li><img src="t/images/girlbig3.jpg" alt=""></li>
        <li><img src="t/images/girlbig1.jpg" alt=""></li>
    </ul>
    <ul class="swiperMenu" style="width:120px;">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>
<!-- 
    <p>
        <input type="button" value="list[0]">
        <input type="button" value="list[1]">
        <input type="button" value="list[2]">
    </p> -->
    <script>

    // 匀减速
    // 正向
    // var box=document.getElementsByTagName("div")[0]
    // box.style.left=0;
    // var start=box.offsetLeft
    // var end=1000
    //  var time=setInterval(function(){
    //     var speed=(end-box.offsetLeft)/2
    //     speed<1?speed=1:speed=speed
    //     box.style.left=box.offsetLeft+speed+"px";
    //     console.log(speed,box.offsetLeft)
    //     if(box.offsetLeft>=1000){
    //         clearInterval(time)
    //         box.style.left=1000+"px"
    //     }
    //  },100)

    // 反向
    // var box=document.getElementsByTagName("div")[0]
    // box.style.left=1000+"px";
    // var start=box.offsetLeft
    // var end=0
    //  var time=setInterval(function(){
    //     var speed=(end-box.offsetLeft)/2
    //     speed>-1?speed=Math.floor(speed):speed=speed
    //     // speed<1?speed=1:speed=speed
    //     box.style.left=box.offsetLeft+speed+"px";
    //     console.log(speed,box.offsetLeft)
    //     if(box.offsetLeft<=0){
    //         clearInterval(time)
    //         box.style.left=0
    //     }
    //  },100)

    //匀加速
    // 正向
    // var box=document.getElementsByTagName("div")[0]
    // box.style.left=0;
    // var start=box.offsetLeft
    // var end=1000
    // var speed=0
    //  var time=setInterval(function(){
    //      speed=speed+10
    //     box.style.left=box.offsetLeft+speed+"px";
    //     if(box.offsetLeft>=1000){
    //         clearInterval(time)
    //         box.style.left=1000+"px"
    //     }
    //     console.log(speed,box.offsetLeft)
    //  },100)

    //  反向
    // var box=document.getElementsByTagName("div")[0]
    // box.style.left=1000+"px";
    // var start=box.offsetLeft
    // var end=0
    // var speed=0
    //  var time=setInterval(function(){
    //      speed=speed-10
    //     box.style.left=box.offsetLeft+speed+"px";
    //     if(box.offsetLeft<=0){
    //         clearInterval(time)
    //         box.style.left=0
    //     }
    //     console.log(speed,box.offsetLeft)
    //  },100)

    //匀速
    // 正向
    // var box=document.getElementsByTagName("div")[0]
    // box.style.left=0;
    // var start=box.offsetLeft
    // var end=1000
    // var speed=(end-start)/50
    //  var time=setInterval(function(){
    //     box.style.left=box.offsetLeft+speed+"px";
    //     console.log(speed,box.offsetLeft)
    //     if(box.offsetLeft>=1000){
    //         clearInterval(time)
    //         box.style.left=1000+"px"
    //     }
    //  },100)

    //  反向
    // var box=document.getElementsByTagName("div")[0]
    // box.style.left=1000+"px";
    // var start=box.offsetLeft
    // var end=0
    // var speed=(end-start)/50
    //  var time=setInterval(function(){
    //     box.style.left=box.offsetLeft+speed+"px";
    //     console.log(speed,box.offsetLeft)
    //     if(box.offsetLeft<=0){
    //         clearInterval(time)
    //         box.style.left=0
    //     }
    //  },100)
    // 链式运动
    //   animate(box,"left",1000,"linear",function(){
    //     animate(box,"top",1000,"linear",function(){
    //         animate(box,"left",0,"linear",function(){
    //             animate(box,"top",0,"linear")
    //         })
    //     })
    //   })
    // 函数封装
    function animate(ele,attr,end,type,fn){
        var start=parseFloat(getStyleAttr(ele, attr))
        // var end=end
        var speed=0
        clearInterval(ele.time)
        // console.log(ele.time);
        ele.time=setInterval(function(){

            if(type=="linear"){
            speed=(end-start)/10
            }  
            if(type=="ease-in"){
                // console.log(start,end,speed)
               end>start?speed=speed+10:speed=speed-10
            }
            if(type=="ease-out"){
             speed=(end-parseFloat(getStyleAttr(ele, attr)))/2
             if(end>start){
                speed<1?speed=Math.ceil(speed):speed=speed
             }
             else{
                speed>-1?speed=Math.floor(speed):speed=speed
             }
            }
        ele.style[attr]=parseFloat(getStyleAttr(ele, attr))+speed+"px"
        if(speed>0){
            if(parseFloat(getStyleAttr(ele, attr))>=end){
                clearInterval(ele.time)
                ele.style[attr]=end+"px"
                if(fn){
                    fn()
                }
            }
        }
        else{
            if(parseFloat(getStyleAttr(ele, attr))<=end){
                clearInterval(ele.time)
                ele.style[attr]=end+"px"
                if(fn){
                    fn()
                }
            }
        }
        // console.log(speed,box.offsetLeft)
     },50)
    }

    function getStyleAttr(ele, attr) {
        if (window.getComputedStyle) { 
            return window.getComputedStyle(ele)[attr];
        } else {
            return ele.currentStyle[attr];
        }
    }
   
    // 多个物体调用时要把time放到元素的属性中
    // var ul=document.getElementsByTagName("ul")[0]
    // var list=ul.getElementsByTagName("li")
    // var p=document.getElementsByTagName("p")[0]
    // var inplist=p.getElementsByTagName("input")
    // animate(list[0],"marginLeft",1000,"linear")
    // animate(list[1],"marginLeft",1000,"ease-in")
    // animate(list[2],"marginLeft",1000,"ease-out")
    // for(let i=0;i<inplist.length;i++){
    //     inplist[i].onclick=function(){
    //         clearInterval(list[i].time)
    //     }
    // } 

    // 无缝轮播
    var wrap=document.getElementsByTagName("ul")[0]
    var list=wrap.getElementsByTagName("li")
    var b=document.getElementsByClassName("wrap")[0]
    var index=0;
    var time=null;
    var menu=document.getElementsByClassName("swiperMenu")[0]
    var list=menu.getElementsByTagName("li")
    active()
    // animate(wrap,"left",-100*index,"linear") 
    function active(){
        time=setTimeout(function(){
            index++;
            console.log(index); 
            animate(wrap,"left",-400*index,"linear",function(){       
                if(index==4){
                    wrap.style.left=0
                    index=0
                }
                for(var j=0;j<list.length;j++){
                list[j].className=""
                }
            list[index==4?index=0:index].className="active"
                active()
            })       
        },1000)

    }
    
    for(let i=0;i<list.length;i++){
        list[i].onclick=function(){
            for(var j=0;j<list.length;j++){
                list[j].className=""
            }
            this.className="active"
            index=i
            animate(wrap,"left",-400*index,"linear")
        }
    }
    wrap.onmouseover=function(){
        clearTimeout(time)
    }
    wrap.onmouseout=function(){
        active()
    }
    </script>
</body>
</html>